import Standout from './components/standout';
import loadNumber from './components/loadNumber';
import {
  createInbizSchema,
  createBizStyleSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createBizProps,
} from '@inbiz/setters';
import IconPicker from './components/iconPicker';
import { createBehavior, createResource } from '@inbiz/core';
import { News as locale } from './locale';
import { getPlatform } from '@inbiz/utils';

export const defaultProps = {
  viewType: 'static',
  viewTypeWap: 'static',
  showCate: false,
  standOut: {
    isStandout: true,
    threshold: 10,
  },
  loadNumber: {
    threshold: 10,
  },
  everytimeLoad: {
    threshold: 10,
  },
  showField: ['createTime'],
  titleFontSize: 20,
  titleColor: '#000',
  titleBgColor: '#fff',
  showImage: true,
  autoRoll: true,
  listLogo: 'shixinyuan',
  headerStyle: {
    icon: { type: 'icon-xinwenzixun' },
  },
  style:
    getPlatform() === 'web'
      ? {
        padding: '0px 20px 15px 20px',
      }
      : {
        padding: '0px 15px 15px 15px',
      },

  titlesize: 20,
  titlecolor: '#000',
  titlebgcolor: '#fff',
  dedailPadding: '80px 20px 15px 20px',
  dedailPaddingWap: '0px 15px 35px 15px',
  dataLoad: 'pagesize',
  dataLoadWap: 'more',
  showText: 'News.tips.see_more',
  showTextWap: 'News.tips.see_more',
  showPosition: 'right-bottom',
  seeMore: false,
  showPositionWap: 'right-top',
};
export const defaultBizProps = {
  pageSize: 10,
};

export const News = createInbizSchema({
  attribute: {
    view: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            viewType: {
              type: 'string',
              enum: ['static', 'roll', 'resume', 'roll-resume', 'bigCard', 'smallCard', 'detail'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              platform: 'web',
            },
            viewTypeWap: {
              type: 'string',
              enum: ['static', 'summary', 'bigCard', 'detail'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              platform: 'wap',
            },
          },
        },
      },
    },

    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
          'x-reactions': [
            {
              dependencies: ['form.attribute.view.x-component-props.viewType'],
              fulfill: {
                schema: {
                  'x-hidden': '{{$deps[0] === "detail"}}',
                },
              },
            },
            {
              dependencies: ['form.attribute.view.x-component-props.viewTypeWap'],
              fulfill: {
                schema: {
                  'x-value': {
                    status: '{{$deps[0] == "static" || $deps[0] == "bigCard" || $deps[0] == "summary"}}',
                    value: 'News.title',
                  },
                },
              },
            },
          ],
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            detail: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
            },
            showImage: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
              'x-reactions': {
                dependencies: ['.viewType'],
                when: "{{['resume', 'roll-resume'].includes($deps[0])}}",
                fulfill: {
                  state: {
                    visible: true,
                    value: true,
                  },
                },
                otherwise: {
                  state: {
                    visible: false,
                    value: false,
                  },
                },
              },
            },
            showCate: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-reactions': [
                {
                  dependencies: ['.viewType', '.viewTypeWap'],
                  when: "{{['detail'].includes($deps[0] || $deps[1] )}}",
                  fulfill: {
                    state: {
                      visible: false,
                    },
                  },
                  otherwise: {
                    state: {
                      visible: true,
                    },
                  },
                },
                {
                  dependencies: ['.viewType'],
                  when: "{{['roll-resume'].includes($deps[0])}}",
                  fulfill: {
                    state: {
                      value: true,
                    },
                  },
                  otherwise: {
                    state: {
                      value: false,
                    },
                  },
                },
              ],
            },
            standOut: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': Standout,
              'x-reactions': {
                dependencies: ['.viewType', '.viewTypeWap'],
                when: "{{['detail'].includes($deps[0] || $deps[1] )}}",
                fulfill: {
                  state: {
                    visible: false,
                  },
                },
                otherwise: {
                  state: {
                    visible: true,
                  },
                },
              },
            },
            showField: {
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component': 'Checkbox.Group',
              enum: ['createTime', 'creator'],
              'x-reactions': {
                dependencies: ['.viewType'],
                when: "{{['resume', 'roll-resume', 'bigCard', 'smallCard', 'detail'].includes($deps[0])}}",
                fulfill: {
                  state: {
                    visible: false,
                  },
                },
                otherwise: {
                  state: {
                    visible: true,
                  },
                },
              },
              platform: 'web',
            },
            autoRoll: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
              'x-reactions': {
                dependencies: ['.viewType'],
                when: "{{$deps[0] == 'roll-resume'}}",
                fulfill: {
                  state: {
                    visible: true,
                    value: true,
                  },
                },
                otherwise: {
                  state: {
                    visible: false,
                    value: false,
                  },
                },
              },
            },
            delay: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                defaultValue: 2,
                formatter: (value: any) => `${value}s`,
                parser: (value: any) => +value.replace('s', ''),
                precision: 0,
                step: 1,
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.viewType'],
                when: "{{$deps[0] == 'roll'}}",
                fulfill: {
                  state: {
                    visible: true,
                  },
                },
                otherwise: {
                  state: {
                    visible: false,
                  },
                },
              },
            },
            listLogo: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': IconPicker,
              'x-reactions': {
                dependencies: ['.viewType', '.viewTypeWap'],
                when: "{{['resume', 'roll-resume', 'bigCard', 'smallCard', 'detail'].includes($deps[0]) || $deps[1] == 'detail' || $deps[1] == 'bigCard' || $deps[1] == 'summary' }}",
                fulfill: {
                  state: {
                    visible: false,
                    value: undefined,
                  },
                },
                otherwise: {
                  state: {
                    visible: true,
                    value: 'shixinyuan',
                  },
                },
              },
              'x-component-props': {
                defaultValue: 'shixinyuan',
              },
            },
            dataLoad: {
              type: 'string',
              enum: ['pagesize', 'more'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewType',
                  'form.attribute.view.x-component-props.viewTypeWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{$deps[0] === "roll" || $deps[0] === "roll-resume" || $deps[0] === "detail" || $deps[1] === "detail"}}',
                  },
                },
              },
              platform: 'web',
            },
            dataLoadWap: {
              type: 'string',
              enum: ['more', 'streamLoad'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-reactions': {
                dependencies: ['form.attribute.view.x-component-props.viewTypeWap'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ $deps[0] === "detail"}}',
                  },
                },
              },
              platform: 'wap',
            },
            loadNumber: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': loadNumber,
              'x-reactions': {
                dependencies: ['.viewTypeWap', '.dataLoadWap'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ $deps[0] === "detail" ||  $deps[1] !=="more" }}',
                  },
                },
              },
              platform: 'wap',
            },
            everytimeLoad: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': loadNumber,
              'x-reactions': {
                dependencies: ['.viewTypeWap', '.dataLoadWap'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{ $deps[0] === "detail" ||  $deps[1] !=="streamLoad" }}',
                  },
                },
              },
              platform: 'wap',
            },
            seeMore: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-reactions': {
                dependencies: ['.dataLoadWap', 'form.attribute.view.x-component-props.viewTypeWap'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "more" || $deps[1] === "detail"  }}',
                  },
                },
              },
              platform: 'wap',
            },
            showText: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'MultilingualInput',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewType',
                  '.dataLoad',
                  'form.attribute.view.x-component-props.viewTypeWap',
                  '.seeMore',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{$deps[0] === "roll" || $deps[0] === "roll-resume" || $deps[0] === "detail" || $deps[1] !== "more" || $deps[2] === "detail"  }}',
                  },
                },
              },
            },
            showTextWap: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'MultilingualInput',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewTypeWap',
                  '.seeMore',
                  '.dataLoadWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{ $deps[0] === "detail" ||  $deps[1] === false  || $deps[2] === "streamLoad"  }}',
                  },
                },
              },
              platform: 'wap',
            },
            showPosition: {
              type: 'string',
              enum: ['right-top', 'right-bottom'],
              'x-decorator': 'FormItem',
              'x-component': 'Radio.Group',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewType',
                  '.dataLoad',
                  'form.attribute.view.x-component-props.viewTypeWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{$deps[0] === "roll" || $deps[0] === "roll-resume" || $deps[0] === "detail" || $deps[1] !== "more" || $deps[2] === "detail"}}',
                  },
                },
              },
            },
            showPositionWap: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['right-top', 'right-bottom', 'bottom-center'],
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewTypeWap',
                  '.seeMore',
                  '.dataLoadWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{ $deps[0] === "detail" || $deps[1] === false || $deps[2] === "streamLoad"  }}',
                  },
                },
              },
              platform: 'wap',
            },
            correlationPage: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewType',
                  '.dataLoad',
                  'form.attribute.view.x-component-props.viewTypeWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{$deps[0] === "roll" || $deps[0] === "roll-resume" || $deps[0] === "detail" || $deps[1] !== "more" || $deps[2] === "detail"}}',
                  },
                },
              },
            },
            correlationPageWap: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: [
                  'form.attribute.view.x-component-props.viewTypeWap',
                  '.seeMore',
                  '.dataLoadWap',
                ],
                fulfill: {
                  schema: {
                    'x-hidden':
                      '{{ $deps[0] === "detail" ||  $deps[1] === false  || $deps[2] === "streamLoad"  }}',
                  },
                },
              },
              platform: 'wap',
            },
          },
        },
      },
    },
    ...createBizProps(
      {
        newsKey: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'ClassPicker',
          'x-component-props': {
            categoryType: 1,
          },
        },
        pageSize: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'NumberPicker',
          'x-component-props': {
            min: 1,
          },
          'x-reactions': {
            dependencies: ['.viewType'],
            when: "{{['detail'].includes($deps[0])}}",
            fulfill: {
              state: {
                value: 5,
              },
            },
            otherwise: {
              state: {
                value: 10,
              },
            },
          },
          platform: 'web',
        },
      },
      true,
      {
        dependencies: [
          'form.attribute.view.x-component-props.viewType',
          'form.attribute.view.x-component-props.viewTypeWap',
        ],
        fulfill: {
          schema: {
            'x-hidden': '{{$deps[0] === "detail" || $deps[1] === "detail"}}',
          },
        },
      },
    ),
  },
  style: {
    ...createComponentStyleSchema({
      dedailPadding: {
        type: 'string',
        'x-component': 'BoxStyleSetter',
        'x-reactions': {
          dependencies: ['form.attribute.view.x-component-props.viewType'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== "detail"}}',
            },
          },
        },
        platform: 'web',
      },
      dedailPaddingWap: {
        type: 'string',
        'x-component': 'BoxStyleSetter',
        'x-reactions': {
          dependencies: ['form.attribute.view.x-component-props.viewTypeWap'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] !== "detail"}}',
            },
          },
        },
        platform: 'wap',
      },
      ...createBizStyleSchema(
        {
          icon: {
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': 'IconPicker',
          },
        },
        {},
        undefined,
        {
          dependencies: ['.viewType', '.viewTypeWap'],
          fulfill: {
            schema: {
              'x-hidden': '{{$deps[0] === "detail" || $deps[1] === "detail"}}',
            },
          },
        },
      ),
    }),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  name: 'News',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'News',
  designerProps: { propsSchema: News },
  designerLocales: locale,
});

export const Resource = createResource({
  icon: 'News',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'sting',
        title: {
          value: 'News.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'News',
        'x-component-biz-props': defaultBizProps,
        'x-component-props': defaultProps,
      },
    },
  ],
});
